<!-- 评论项 -->
<template>
  <div>
    <van-cell>
      <template #icon>
        <van-image
          width="36"
          height="36"
          :src="comment.aut_photo"
          round
          fit="cover"
        />
      </template>
      <template #title>
        <div class="top">
          <span>{{ comment.aut_name }}</span>
          <div class="like-wrap" @click="onCommentLike">
            <van-icon
              :class="{ liked: comment.is_liking }"
              :name="comment.is_liking ? 'good-job' : 'good-job-o'"
            />
            <span>{{ comment.like_count }}</span>
          </div>
        </div>
        <div class="content">{{ comment.content }}</div>
        <div class="reply">
          <span class="pubdate">{{
            comment.pubdate | datetime("MM-DD HH:mm")
          }}</span>
          <van-button
            class="replyBtn"
            round
            size="mini"
            @click="$emit('reply-click', comment)"
          >
            {{ comment.reply_count }} 回复</van-button
          >
        </div>
      </template>
    </van-cell>
  </div>
</template>

<script>
import { addCommentLike, deleteCommentLike } from "../../../api/comment";
export default {
  name: "CommentsItem",
  data() {
    return {};
  },
  props: ["comment"],
  methods: {
    async onCommentLike() {
      const commentId = this.comment.com_id.toString();
      if (this.comment.is_liking) {
        await deleteCommentLike(commentId);
        this.comment.like_count--;
      } else {
        await addCommentLike(commentId);
        this.comment.like_count++;
      }
      this.comment.is_liking = !this.comment.is_liking;
    },
  },
};
</script>

<style lang="less" scoped>
.van-image {
  margin-right: 13px;
}
.content {
  font-size: 16px;
  color: #222222;
}
/deep/.van-cell__title {
  flex: 1;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .liked {
    color: #ff69b4;
  }
}
.reply {
  display: flex;
  font-size: 10px;
  /deep/.replyBtn {
    padding: 0 8px;
    margin-left: 20px;
    font-size: 12px;
  }
  .pubdate {
    font-size: 10px;
  }
}
</style>